---
title: Text
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## Introduceți text

Permite utilizatorilor să introducă și să editeze text.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Proprietăți    | Tip              | Descriere                                                                                                                                            |
| -------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| numeClasa      | șir              | Nume opțional pentru stilizare suplimentară                                                                                                          |
| etichetă       | șir              | Reprezintă eticheta pentru intrare                                                                                                                   |
| onChange       | funcție          | The function called when the input value changes                                                                                                     |
| lățimeCompletă | boolean          | Indică dacă intrarea ar trebui să ocupe 100% din lățime                                                                                              |
| disableHotkeys | boolean          | Indică dacă tastele rapide sunt activate pentru intrare                                                                                              |
| eroare         | șir              | Reprezintă mesajul de eroare care să fie afișat. Când este oferit, adaugă și o pictogramă de eroare pe partea dreaptă a intrării     |
| onKeyDown      | funcție          | Apelează atunci când o tastă este apăsată în timp ce câmpul de intrare este focalizat. Primește un `React.KeyboardEvent` ca argument |
| RightIcon      | ComponentaIcoana | An optional icon component displayed on the right side of the input                                                                                  |

Componenta acceptă și alte atribute de element HTML de intrare.

</Tab>

</Tabs>

## Autosize Text Input

Componenta de intrare text care își ajustează automat înălțimea în funcție de conținut.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};
```

</Tab>

<Tab title="Props">

| Proprietăți | Tip     | Descriere                                                                                         |
| ----------- | ------- | ------------------------------------------------------------------------------------------------- |
| onValidate  | funcție | The callback function you want to trigger when the user validates the input                       |
| minRows     | număr   | Numărul minim de rânduri pentru aria textului                                                     |
| placeholder | șir     | Text loc de plasare afișat când aria textului este goală                                          |
| onFocus     | funcție | Funcția de apelare dorită când aria textului câștigă focalizare                                   |
| variantă    | șir     | Varianta intrării. Opțiuni includ: `implicit`, `icon`, și `buton` |
| buttonTitle | șir     | Titlul pentru buton (aplicabil doar pentru varianta butonului)                 |
| valoare     | șir     | Valoarea inițială pentru aria textului                                                            |

</Tab>

</Tabs>

## Text Area

Vă permite să creați intrări de text pe mai multe linii.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| Proprietăți | Tip     | Descriere                                                               |
| ----------- | ------- | ----------------------------------------------------------------------- |
| dezactivat  | boolean | Indică dacă aria textului este dezactivată                              |
| minRows     | număr   | Numărul minim de rânduri vizibile pentru aria textului. |
| onChange    | funcție | Callback function triggered when the text area content changes          |
| placeholder | șir     | Placeholder text displayed when the text area is empty                  |
| valoare     | șir     | Valoarea curentă a câmpului de text                                     |

</Tab>
</Tabs>
